<template>
	<section>
		<!--start  面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item>设置</el-breadcrumb-item>
				<el-breadcrumb-item>会员处理流程设置</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--start content-->
		<!--start content-->
		<div class="content">
			<div class="ddcllc-top">
				<em class="ddcllc-em1"></em><span>表示此会员步骤不允许调整</span>
				<em class="ddcllc-em2"></em><span>表示已启用此会员步骤</span>
				<em class="ddcllc-em3"></em><span>表示已禁用此会员步骤</span>
			</div>
			<div class="ddcllc-center">
				<div>
					<p>会员流程设置</p>
					<span class="ddcllc-no"><em class="iconfont">&#xe65e;</em></span>
					<span class="ddcllc-yes" @click="yes1=!yes1" :class="{spanactive:yes1}"><em class="iconfont">&#xe60e;</em></span>
					<span class="ddcllc-no"><em class="iconfont">&#xe65d;</em></span>
					<div class="ddcllc-adsto"></div>
					<div class="ddcllc-shuomin">
						<span>新增客户</span>
						<span>三证审核</span>
						<span>完成</span>
					</div>
				</div>

			</div>
			<div class="btton" @click="updateParamValue">
				<a>保存</a>
			</div>
		</div>
		<!--end content-->
	</section>
</template>

<script>
	import * as basicData from '../../../assets/data/basicDDTypeData'
	export default {
		data() {
			return {
				clientHeight: document.documentElement.clientHeight,
				memberBasicParamViewVo:"",                               //会员流程自定义对象
				memberParamValueMap:"",                                  //会员流程
				memberParamKey:"BasicMember001",                           //会员流程设置key
				yes1:true,
			}
		},
		methods: {
//-------------------获取流程状态(用于判断状态是否启用)---------------------------
            queryParamValue(){
            	/*1说明流程存在反之则说明不存在*/
            	this.axios({
	              method: 'post',
	              url: "/v3/basic/params/"+this.memberParamKey
	            }).then((res) => {
	            		this.memberParamValueMap = res.data.paramValueMap;
	            		this.memberBasicParamViewVo = res.data;
	            		if(res.data.paramValueMap!=null && res.data.paramValueMap!=""&&res.data.paramValueMap!=undefined){
	            		   this.memberParamValueMap["auditpass"]==1?this.yes1=false:this.yes1=true;
	            		}
	            }).catch((err)=>{
	            	this.Public.openError(this,err.response.data)
	            });
            },

//-------------------保存已更改的流程状态-------------------------------------
            updateParamValue(){
               this.memberParamValueMap["auditpass"] = this.yes1?0:1;
               this.updateParamValueFunction(this.memberBasicParamViewVo.paramCode,this.memberParamKey,this.memberBasicParamViewVo.paramValue,this.stringCount(this.memberParamValueMap));

            },
//-------------------更新流程状态方法-------------------------------------
            updateParamValueFunction(paramCode,paramKey,paramValue,newParamValue){
            	if(paramValue == newParamValue){
            		return;
            	}
            	this.axios({
	              method: 'PUT',
	              url: "/v3/basic/params/"+paramCode,
	              data: {
	                "paramKey":paramKey,
	                "paramValue":newParamValue,
	              }
	            }).then((res) => {
	            	this.Public.openSuccess(this,"操作成功！");
	            	this.queryParamValue();
	            }).catch((err)=>{
	            	this.Public.openError(this,err.response.data)
	            });
            },
//-------------------流程值拼接--------------------------------------------
            stringCount(map){
            	var mapStr = "";
            	for(var key in map){
            		mapStr += key+":"+map[key]+",";
            	}
            	return mapStr.substring(0,mapStr.length-1);
            },

		},
		mounted() {
			/* 动态给list和table的高度赋值 */
			this.tableH = document.documentElement.clientHeight - 175;
			/* 监听window.onresize事件 */
			const _this = this;
			this.queryParamValue();
		}
	}
</script>

<style scoped>
	* {
		transition: .2s;
		box-sizing: border-box;
	}

	section {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	div.location {
		flex: 0 0 25px;
		padding: 3px 0 15px 0;
	}

	div.content {
		position: relative;
		flex: 1;
		width: 100%;
		padding: 15px 20px 0 20px;
		box-sizing: border-box;
		background: #fff;
	}
	.ddcllc-top{
		margin:5px;
	}
	.ddcllc-top em{
		display: inline-block;
		width: 14px;
		height: 14px;
		border-radius:50% ;
		position: relative;
		top: 2px;
		margin-right: 3px;
	}
	.ddcllc-em1{
		border: 2px solid #13C19F;
	}
	.ddcllc-em2{
		background: #13C19F;
	}
	.ddcllc-em3{
		border: 2px solid #e6ecf2;
	}
	.ddcllc-top span{
		color: #96a6b6;
		margin-right: 40px;
	}
	.ddcllc-center{
		margin-top: 70px;
		margin-left: 30px;
	}
	.ddcllc-center >div{
		position: relative;

	}
	.ddcllc-center >div p{
		font-size: 16px;
		color: #333;
	}
	.ddcllc-center >div >span{
		position: relative;
		display: inline-block;
		width: 70px;
		height: 70px;
		border-radius:50% ;
		text-align: center;
		line-height: 69px;
		margin: 30px;
		z-index: 100;
	}
	.ddcllc-center >div span em{
		font-size: 35px;
	}
	.ddcllc-no{
		border: 2px solid #13C19F;
		background: #fff;

	}
	.ddcllc-no em{
		font-size: 35px;
		color: #13C19F;
	}
	.ddcllc-yes{
		background: #13C19F;
		cursor: pointer;
		border: 2px solid #13C19F;
	}
	.ddcllc-yes em{
		color: #fff;
	}
	.ddcllc-center .yes3 em{
		font-size: 45px;
		line-height: 60px;
		position: relative;
		top:2px;
	}
	.ddcllc-hui{
		border: 2px solid #e6ecf2;
		background: #fff;
	}
	.ddcllc-hui em{
		color:#d8dfe7;
	}
	.ddcllc-adsto{
		position: absolute;
		border-top:2px solid #e6ecf2;
		width: 350px;
		top: 84px;
	}
	.ddcllc-shuomin{
		margin-bottom: 50px;
	}
	.ddcllc-shuomin span{
		display: inline-block;
		width: 130px;
		text-align: center;
		position: relative;
		top: -10px;
	}
	.spanactive{
		border:2px solid #e6ecf2;
		background: #fff;
	}
	.spanactive em{
		color:#d8dfe7;
	}
	.btton{
		margin: 20px;
	}
	.btton a{
		display: block;
		width: 80px;
		height: 32px;
		line-height: 32px;
		text-align: center;
		color: #fff;
		background: #13C19F;
		border-radius:20px ;
		margin-left: 30px;
		cursor: pointer;
	}
</style>
